<template>
	<view class="container">
		<view class="warp u-m-t-20">

			<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
				<u-gap :bg-color="bgColor" :height="height" :required="required"></u-gap>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" label="产业" prop="industry">
						<view style="width:100%;text-align: right;" @click="cySelect">{{form.industry || "请选择"}}</view>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition" :border-bottom="true" label="地域" prop="area">
						<view style="width:100%;text-align: right;" @click="cityActive = true">{{form.area || "请选择"}}</view>
						<!-- <u-input type="select" :select-open="selectShowDy" v-model="form.area" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right" @click="selectShowDy = true"></u-input> -->
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition" :border-bottom="true" label="企业领域" prop="corporateIdentity">
						<view style="width:100%;text-align: right;" @click="qySelect">{{form.corporateIdentity || "请选择"}}</view>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="企业性质" prop="enterpriseNature">
						<u-input
							type="select"
							:select-open="selectShowQyxz"
							v-model="form.enterpriseNature"
							placeholder="请选择"
							placeholderStyle="color: #0D1D36;"
							input-align="right"
							@click="selectShowQyxz = true"
						></u-input>
						<u-select mode="single-column" :list="fetchDict.company_nature" value-name="label" label-name="label" v-model="selectShowQyxz" @confirm="selectConfirmQyxz"></u-select>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition" :border-bottom="true" label="擅长领域" prop="enterpriseField">
						<view style="width:100%;text-align: right;" @click="mSelectShowClick">{{form.enterpriseField || "请选择"}}</view>
						<!-- <u-input :border="border" type="select" :select-open="selectShowqyly" v-model="form.enterpriseField" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right" @click="selectShowqyly = true"></u-input>
						 <u-select mode="single-column" :list="fetchDict.company_type" value-name="label" label-name="label" v-model="selectShowqyly" @confirm="selectConfirmqyly"></u-select> -->
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition" :border-bottom="true" label="企业资质" prop="qualification">
					<!-- 	<u-input :border="border" type="select" :select-open="selectShowXmlb" v-model="form.qualification" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right" @click="selectShowXmlb = true"></u-input> -->
						 <view style="width:100%;text-align: right;" @click="mSelect">{{form.qualification || "请选择"}}</view>
						 
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="质量体系" prop="qualitySystem">
						 	<u-input type="text" v-model="form.quality" placeholder="请输入" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="诚信保证金" label-width="400" prop="zsbzj">
						<u-radio-group v-model="form.zsbzj" @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
							<u-radio shape="square"  v-model="item.checked" v-for="(item, index) in checkboxListTwo" :key="index" :name="item.name">{{ item.name }}</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item v-if="zsbzj" class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="" prop="integrityDeposit">
						<u-input :border="border" placeholder="请输入保证金金额  元" v-model="form.integrityDeposit" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="履约信誉" prop="performanceReputation">
						<picker @change="bindPickerlyChange" :value="sindex" :range="lvxys" style="width:100%;text-align: right;">
							<view class="uni-input">{{lvxys[sindex] || "请选择"}}</view>
						</picker>
					</u-form-item>
				
			</u-form>
		</view>
		<view class="warp u-m-t-20 u-p-30">
			
			<u-button class="button" @click="submit">确定</u-button>
			<!--弹出框-->
			<u-select :default-value="defaultValue" v-model="selectShowDy" mode="mutil-column-auto" value-name="value" label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity"></u-select>
			<u-select :default-value="defaultValue" v-model="selectShowXmlb" mode="mutil-column-auto" :list="fetchDict.qualification_merge" value-name="label" label-name="label" @confirm="confirmXmlb"></u-select>
			
			<TriTree ref="sclyTree" :range="fetchDict.all_adept_field" @confirm="function (e){return setChooseType(e,'enterpriseField')}"></TriTree>
			<TriTree ref="triTree" :range="fetchDict.qualification_merge" @confirm="function (e){return setChooseType(e,'qualification')}"></TriTree>
			<TriTree ref="cyTree" :multiple="false" :range="fetchDict.industry" @confirm="function (e){return setChooseType(e,'industry')}"></TriTree>
			
			 <TriTree ref="qyTree" :range="fetchDict.company_type" @confirm="function (e){return setChooseType(e,'corporateIdentity')}"></TriTree>
		<city-select v-model="cityActive" @city-change="cityChange"></city-select>
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
import TriTree from '@/components/tki-tree/tki-tree.vue'
	import citySelect from '@/components/u-city-select.vue';
export default {
	components: {
		citySelect,
		TriTree
	},
	data() {
		let that = this;
		return {
				cityActive: false,
			index:0,
			qualitySystems:['请选择','无','有'],
			selectShowqyly:false,
			fetchDict:[],
			selectShowQyxz:false,
			defaultValue: [3],
			listCitys:[],
			listXmlbs:[],
			show: false,
			showDate:false,
			mode: 'range',
			result: "开始时间   至   结束时间",
			startText: '开始',
			endText: '结束',
			rangeColor: '#2979ff',
			rangeBgColor: 'rgba(41,121,255,0.13)',
			activeBgColor: '#2979ff',
			height: 20,
			bgColor: this.$u.color.bgColor,
			marginTop: 30,
			marginBottom: 30,
			btnType: 'primary',
			reqBody: {},
			pattern: '',
			/**
			 * form验证
			 * */
			model: {},
			form: {},
			zsbzj: false,
			startTime: '',
			endTime: '',			
			checkboxListTwo: [
			
				{
					name: '需要',
					checked: false,
					disabled: false
				},
				{
					name: '不需要',
					checked: false,
					disabled: false
				},
			],
			rzfsList:[
				{
					value: '资金入股',
					label: '资金入股'
				},
				{
					value: '借贷',
					label: '借贷'
				},
				{
					value: '其他',
					label: '其他'
				}
			],
			rules: {},
			checkboxList: [
				{
					name: '企业',
					checked: false,
					disabled: false
				},
				{
					name: '团队',
					checked: false,
					disabled: false
				},
				{
					name: '无',
					checked: false,
					disabled: false
				},
			],
			required: false,
			border: false,
			check: false,
			selectStatus: 'close',
			selectShowDy: false,
			selectShowXmlb: false,
			radio:'',
			radio1: '',
			radioCheckWidth: 'auto',
			radioCheckWrap: false,
			labelPosition: 'left',
			codeTips: '',
			errorType: ['toast'],
			/**/

			/**
			 * 数字统计
			 * */
			startVal: 500,
			endVal: 500,
			separator: ',',
			decimals: 0,
			duration: 2000,
			autoplay: true,
			useEasing: true,
			current: 3,
			isStop: false,
			bold: false,
			fontSize: 24,
			color: '#fff',
			/**/
			sindex:0,
			lvxys: ["高","中","低"],
			keyIndex:0,
			keywords: [{name:'企业',selected:true},{name:'设计师',selected:false},{name:'监理',selected:false},{name:'大型企业',selected:false},{name:'采购',selected:false},{name:'监理',selected:false}]
		};
	},
	mounted() {},
	onShow(){
		// this.wsDictionary();
		// this.wxyDictionary();
		// this.wyxDictionary();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(options){
		if(options.row){
			this.model = JSON.parse(decodeURIComponent(options.row));
			this.model.intention = {};
		}		
		if(options.type){
			this.url = JSON.parse(decodeURIComponent(options.type));
		}
		//获取省市区
		this.cityList();
		
		var keys = {'keys':['company_nature','enterprise_classification','company_type','qualification_merge','industry','all_adept_field']}
		this.dictionaryFetchDict(keys);		
		this.form.performanceReputation = "高";
		// this.dictionaryFetchDict('company_nature'); //企业性质
		// this.dictionaryFetchDict('enterprise_classification'); //企业分类
		// //this.dictionaryFetchDict('quality_system'); //质量体系
		// this.dictionaryFetchDict('company_type'); //擅长领域
		// this.dictionaryFetchDict('qualification_merge'); //企业资质
		// this.dictionaryFetchDict('industry'); //产业	
			
		// this.dictionaryFetchDict('all_adept_field'); //企业擅长领域
	},
	methods: {	
		
			cityChange(e) {
				let address = e.province.label
				if(e.city){
					address = address + '-' + e.city.label;
				}
				if(e.area){
					address = address + '-' + e.area.label;
				}
				this.form.area = address
			},
		qySelect() {
			this.$refs.qyTree._show()
		},
		bindPickerlyChange(e){
			this.sindex= e.detail.value;
			this.form.performanceReputation = this.lvxys[e.detail.value];
		},
		setChooseType(item, type) {
			var column_array = this.$mUtils.array_column(item, 'label');
			var modelValue = column_array.join(',');
			this.form[type] = modelValue;
			this.$forceUpdate()
		},
		mSelectShowClick() {
			this.$refs.sclyTree._show()
		},
		 bindPickerChange: function(e) {
			 console.log("userInfo",this.$store.state.userInfo.completeFlag);
			
			 if(this.qualitySystems[e.target.value] =='有'){
				 this.findUserInfoOne();
			 }else{
				 this.form.qualitySystem = '无'
			 }
			this.index = e.target.value
		},
		async findUserInfoOne() {
			let that = this;
			let data = await this.$apis.findUserInfoOne();
			if (data.code === 200) {
				this.form.qualitySystem = data.data.company.quality
			}
		},
		cySelect() {
			this.$refs.cyTree._show()
		},
		setChooseType(item, type){
			console.log("setChooseType",item, type);
			var column_array=this.$mUtils.array_column(item,'label');
			var modelValue=column_array.join(',');
			this.form[type] = modelValue;
			this.$forceUpdate()	
		},
		mSelect() {
			this.$refs.triTree._show()
		},
		selectConfirmqyly(e) {
			this.form.enterpriseField = '';
			e.map((val, index) => {
				this.form.enterpriseField += this.form.enterpriseField == '' ? val.label : '-' + val.label;
			});
		},		
		async dictionaryFetchDict(keyWords){
			let result = await this.$apis.fetchMultipleKey(keyWords);
			this.fetchDict = result.data;
		},
		selectConfirmQyxz(e) {
			this.form.enterpriseNature = '';
			e.map((val, index) => {
				this.form.enterpriseNature += this.form.enterpriseNature == '' ? val.label : '-' + val.label;
			});
		},
		handleClickWeight(e) {
			var model = encodeURIComponent(JSON.stringify(this.model));
			let url = encodeURIComponent(JSON.stringify("release/bidding"));
			if(this.form.wyx == '企业'){				
				uni.navigateTo({
					url: '../user/companyWeight?type='+url+'&row=' + model
				})
			}else if(this.form.wyx == '团队'){
				uni.navigateTo({
					url: '../user/teamWeight?type='+url+'&row=' + model
				})
			}else{				
				uni.navigateTo({
					url: '../user/personWeight?type='+url+'&row=' + model
				})
			}
		},
		confirmCity(e) {
			this.form.area = '';
			e.map((val, index) => {
				this.form.area += this.form.area == '' ? val.label : '-' + val.label;
			})
		},
		confirmXmlb(e) {
			this.form.qualification = '';
			e.map((val, index) => {
				this.form.qualification += this.form.qualification == '' ? val.label : '-' + val.label;
			})
		},
		async cityList(){
			let result = await this.$apis.fetchArea({level:2});	
			this.listCitys = result.data;
		},
		// checkbox选择发生变化
		checkboxGroupChange(e) {
			// debugger
			if(e==="需要"){
				this.zsbzj = true;
			}else{
				this.zsbzj = false;
			}
			
		},
		// // checkbox选择发生变化
		// checkboxGroupChange(e) {
		// 	// debugger
		// 	this.form.cjzt = e;
		// 	if(e==="企业"){
		// 		this.form.cjztTwo = 0;
		// 	}else if(e==="个人"){
		// 		this.form.cjztTwo = 1;
		// 	}else{
		// 		this.form.cjztTwo = 2;
		// 	}
			
		// },
		// checkbox选择发生变化
		checkboxGroupChange1(e) {
			this.form.xhm = e;
			if(e==="是"){
				this.form.xhmTwo = 1;
			}else{
				this.form.xhmTwo = 0;
			}
		},
		submit() {
			this.model.intention  = this.form;
			this.$refs.uForm.validate(valid => {
				if (valid) {
					var model = encodeURIComponent(JSON.stringify(this.model));
					if(this.url != ''){
						uni.redirectTo({
							url: '/pages/'+this.url+'?row=' + model
						})
					}else{
						uni.navigateTo({
							url: '/pages/wisdomcommune/zhihuiService?row=' + model
						})
					}
				} else {
					console.log('验证失败');
				}
			});
			
		},		
		
		selectKey(e){
			this.keywords[e].selected = !this.keywords[e].selected;
		},
		// 选择
		selectConfirmFwnr(e) {
			this.form.qyxz = '';
			e.map((val, index) => {
				this.form.qyxz += this.form.qyxz == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmJzjd(e) {
			this.form.jzjd = '';
			e.map((val, index) => {
				this.form.jzjd += this.form.jzjd == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmRzfs(e) {
			this.form.rzfs = '';
			e.map((val, index) => {
				this.form.rzfs += this.form.rzfs == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmQylx(e) {
			this.form.qylx = '';
			e.map((val, index) => {
				this.form.qylx += this.form.qylx == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmQydy(e) {
			this.form.qydy = '';
			e.map((val, index) => {
				this.form.qydy += this.form.qydy == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmPpsx(e) {
			this.form.ppsx = '';
			e.map((val, index) => {
				this.form.ppsx += this.form.ppsx == '' ? val.label : '-' + val.label;
			});
		},
		change(e) {
			if (this.mode == 'range') {
				this.form.sjap = e.startDate + " - " + e.endDate;
				this.startTime = e.startDate;
				this.endTime = e.endDate;
			} else {
				this.form.sjap = e.result;
			}
		},
		changeDate(e) {
			this.form.ppsx = e.result;
		},
		
		dianji(){
			this.show = true;
		}
	}
};
</script>
<style scoped lang="scss">
	// 上下滑动
	.scroll-Y {
	  height: 300rpx;
	  .scroll-view-item {
	    height: 300rpx;
	    width: 100%;
	  }
	}
	// 左右滑动
	.scroll-view_H {
	  height: 400rpx;
	  width: 100%;
	  white-space: nowrap; // 滚动必须加的属性
	  border: 1px #007aff solid;
	 
	  .scroll-view-item_H {
	    height: 300rpx;
	    width: 40%;
	    margin-right: 20rpx;
	    display: inline-block;
	    vertical-align: top;
	  }
	}
page {
	// background: #f5f5f9;
}
.warp {
	background: #fff;
}
.count {
	.count-to {
		font-size: 24rpx;
	}
	text {
		padding: 2rpx 12rpx;
		background: #ff9e21;
		color: #ffffff;
		font-size: 24rpx;
	}
}
.group {
	padding: 6rpx 21rpx;
	background: #f1f7ff;
	border-radius: 6rpx;
	margin: 30rpx 30rpx 0 30rpx;
}
.button {
	width: 662rpx;
	margin:145rpx auto 65rpx auto;
	background: #ab61ff;
	border-radius: 40rpx;
	border: 0;
	color: #fff;
	&.u-hairline-border:after {
		border: 0;
	}
}
.fgx{
	width: 100%;
	height: 20rpx;
	background-color: #F5F5F9;
	margin-top: 40rpx;
}
.wdztc{
	width: 190rpx;
	height: 56rpx;
	background: rgba(171, 97, 255, 0.15);
	border: 2rpx dashed #AB61FF;
	border-radius: 6rpx;
	color: #AB61FF;
	font-size: 28rpx;
	text-align: center;
	line-height: 56rpx;
	margin-top: 40rpx;
	margin-left: 280rpx;
}
.qtsm{
	display: flex;
	align-items: center;
	.hz{
		color: #0D1D36;
		font-size: 30rpx;
		margin-left: 15rpx;
	}
}
.zwpj{
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
</style>
